{% block sw_media_upload_v2 %}
<div class="sw-media-upload-v2 sw-media-compact-upload-v2">
    {% block sw_media_upload_v2_compact %}
    {% block sw_media_upload_v2_compact_label %}
    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
    <label
        v-if="label"
        class="sw-media-compact-upload-v2__label"
    >
        {{ label }}
    </label>
    {% endblock %}

    <div
        v-if="variant == 'compact'"
        class="sw-media-upload-v2__content"
    >
        <sw-button-group split-button>
            {% block sw_media_upload_v2_compact_button_file_upload %}
            <mt-button
                :disabled="disabled"
                class="sw-media-upload-v2__button-compact-upload"
                variant="primary"
                @click="onClickUpload"
            >
                {{ buttonFileUploadLabel }}
            </mt-button>
            {% endblock %}

            {% block sw_media_upload_v2_compact_button_context_menu %}
            <sw-context-button
                v-if="uploadUrlFeatureEnabled"
                :disabled="disabled"
            >
                <template #button>
                    <mt-button
                        :disabled="disabled"
                        square
                        variant="primary"
                        class="sw-media-upload-v2__button-context-menu"
                    >
                        <mt-icon
                            name="regular-chevron-down-xs"
                            size="16"
                        />
                    </mt-button>
                </template>

                <sw-context-menu-item
                    class="sw-media-upload-v2__button-url-upload"
                    @click="useUrlUpload"
                >
                    {{ $tc('global.sw-media-upload-v2.buttonUrlUpload') }}
                </sw-context-menu-item>
            </sw-context-button>
            {% endblock %}
        </sw-button-group>

        {% block sw_media_upload_v2_compact_url_form %}
        <sw-media-url-form
            v-if="isUrlUpload"
            variant="modal"
            @modal-close="useFileUpload"
            @media-url-form-submit="onUrlUpload"
        />
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_upload_v2_regular %}
    <div
        v-if="variant == 'regular'"
        class="sw-media-upload-v2__content"
    >
        {% block sw_media_upload_v2_regular_header %}
        {% endblock %}

        {% block sw_media_upload_v2_regular_drop_zone %}
        <div
            ref="dropzone"
            class="sw-media-upload-v2__dropzone"
            :class="isDragActiveClass"
        >

            {% block sw_media_upload_v2_preview %}
            <div class="sw-media-compact-upload-v2__preview-wrapper">
                <template v-if="allowMultiSelect && mediaPreview">
                    <div
                        v-for="item in mediaPreview"
                        :key="item.name"
                        class="sw-media-compact-upload-v2__preview-item"
                    >
                        <sw-media-preview-v2
                            class="sw-media-upload-v2__preview"
                            :source="item"
                            :media-is-private="privateFilesystem"
                        />

                        <sw-context-button>
                            <slot name="context-menu-items">
                                <sw-context-menu-item variant="headline">
                                    {{ getFileName(item) }}
                                </sw-context-menu-item>
                                <sw-context-menu-divider />
                                <sw-context-menu-item
                                    v-tooltip.top="{
                                        message: disableDeletionForLastItem.helpText,
                                        disabled: !isDeletionDisabled || !disableDeletionForLastItem.helpText,
                                        showOnDisabledElements: true
                                    }"
                                    class="sw-media-upload-v2__delete-item-button sw-context-menu-item__buttonRemove"
                                    :disabled="isDeletionDisabled"
                                    variant="danger"
                                    @click="$emit('delete-item', item)"
                                >
                                    {{ removeFileButtonLabel }}
                                </sw-context-menu-item>
                            </slot>
                        </sw-context-button>
                    </div>
                </template>

                <template v-else-if="!allowMultiSelect && (preview || source)">
                    {% block sw_media_upload_v2_regular_preview_file %}
                    <sw-media-preview-v2
                        v-if="source || preview"
                        class="sw-media-upload-v2__preview"
                        :source="source || preview"
                        :media-is-private="privateFilesystem"
                    />
                    {% endblock %}
                </template>

                {% block sw_media_upload_v2_regular_preview_fallback %}
                <div
                    v-else
                    class="sw-media-upload-v2__preview is--fallback"
                >
                    <mt-icon
                        class="sw-media-upload-v2__fallback-icon"
                        name="regular-image"
                    />
                </div>
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_media_upload_v2_actions %}
            <div
                class="sw-media-upload-v2__actions"
                :class="{ 'has--source': source }"
            >
                <div
                    v-if="source"
                    class="sw-media-upload-v2__file-info"
                >
                    <div class="sw-media-upload-v2__file-headline">
                        {{ mediaNameFilter(source) }}
                    </div>
                    <mt-icon
                        class="sw-media-upload-v2__remove-icon"
                        name="regular-times-xs"
                        @click="onRemoveMediaItem"
                    />
                </div>

                <template v-else>
                    {% block sw_media_upload_v2_regular_actions_url %}
                    <sw-media-url-form
                        v-if="isUrlUpload"
                        class="sw-media-upload-v2__url-form"
                        variant="inline"
                        @media-url-form-submit="onUrlUpload"
                    />
                    {% endblock %}

                    {% block sw_media_upload_v2_regular_actions_add %}
                    <template v-if="!isUrlUpload">
                        {% block sw_media_upload_v2_regular_upload_button %}
                        <mt-button
                            class="sw-media-upload-v2__button upload"
                            :disabled="isLoading || disabled"
                            ghost
                            size="small"
                            variant="secondary"
                            @click="onClickUpload"
                        >
                            {{ buttonFileUploadLabel }}
                        </mt-button>
                        {% endblock %}

                        <template v-if="!privateFilesystem">
                            <mt-button
                                variant="primary"
                                :disabled="disabled"
                                class="sw-media-compact-upload-v2__browse-button"
                                @click="mediaModalIsOpen = true"
                            >
                                <mt-icon
                                    class="sw-media-compact-upload-v2__browse-icon"
                                    name="regular-image"
                                />
                            </mt-button>

                            <sw-media-modal-v2
                                v-if="mediaModalIsOpen"
                                :allow-multi-select="false"
                                @modal-close="closeModal()"
                                @media-modal-selection-change="onModalClosed"
                            />
                        </template>

                        {% block sw_media_upload_v2_regular_media_sidebar_button %}{% endblock %}
                    </template>
                    {% endblock %}
                </template>
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_upload_v2_file_input %}
    <form
        ref="fileForm"
        class="sw-media-upload-v2__form"
    >
        <input
            id="files"
            ref="fileInput"
            class="sw-media-upload-v2__file-input"
            type="file"
            :accept="fileAccept"
            :multiple="multiSelect"
            @change="onFileInputChange"
        >
    </form>
    {% endblock %}
</div>
{% endblock %}
